<template>
  <swiper class="narrow">
    <swiper-item v-for="item in banners" :key="item.acm" class="top">
      <a :href="item.link">
        <img :src="item.image923" class="imgone" @load="imgLoad"> <!-- @load监听图片是否加载 -->
      </a>
    </swiper-item>
  </swiper>
</template>

<script>
import {Swiper,SwiperItem} from 'components/common/swiper'
export default {
name: 'wrapper',
  components: {
    Swiper,
    SwiperItem
  },
  props: {
    banners:{
      type:Array,
      default(){
        return []
      }
    }
  },
  data() {
    return {
      isLoad: false,
    };
  },
  watch: {},
  computed: {},
  methods: {
    imgLoad(){
      if (!this.isLoad) { //节流阀 也可以在父组件监听函数位置写一个.once
        this.$emit("SwiperImgLoad");
        this.isLoad = true;
      }
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="less" scoped>
.narrow{
  border: 1px solid rgba(0, 0, 0, .1);
  box-sizing: border-box;
}
.top{
  padding: 5px;
  border-radius: 5%;
  a{
    display: block;
  }
  .imgone{
    padding: 5px;
    box-sizing: border-box;
    border-radius: 15px;
  }
}
</style>